<template>
    <div class="app-container">


        <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch">
            <!--  行业  地区  单位名称  监管机构  联系电话 -->
            <el-form-item label="监管机构" prop="governmentType">
                <el-input v-model="queryParams.governmentType" placeholder="请输入监管机构" clearable
                    @keyup.enter="handleQuery" />
            </el-form-item>
            <el-form-item label="监管行业" prop="industryId">
                <div class="w-[200px]">
                    <el-select class="flex-1" v-model="queryParams.industryId" placeholder="请选择监管行业" clearable>
                        <el-option class="flex-1" v-for="item in industryList" :key="item.industryId" :label="item.name"
                            :value="item.industryId" />
                    </el-select>
                </div>
            </el-form-item>
            <!--  -->
            <el-form-item label="监管系统" prop="systemName">
                <el-input v-model="queryParams.systemName" placeholder="请输入监管系统" clearable @keyup.enter="handleQuery" />
            </el-form-item>

            <el-form-item label="监管区域" prop="areaId">
                <el-cascader v-model="queryParams.areaId" :options="areaList" :props="props1" @change="TreeChange1" />
            </el-form-item>
            <el-form-item label="监管单位" prop="name">
                <el-input v-model="queryParams.name" placeholder="请输入监管单位" clearable @keyup.enter="handleQuery" />
            </el-form-item>

            <el-form-item label="联系电话" prop="phone">
                <el-input v-model="queryParams.phone" placeholder="请输入联系电话" clearable @keyup.enter="handleQuery" />
            </el-form-item>

            <el-form-item>
                <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
                <el-button icon="Refresh" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>
        <ControlsCommon>
            <el-row :gutter="10" class="mb8">
                <el-col :span="1.5">
                    <el-button type="primary" icon="Plus" @click="handleAdd">新增</el-button>
                </el-col>
                <el-col :span="1.5">
                    <el-button type="success" icon="Edit" :disabled="single" @click="handleUpdate">修改</el-button>
                </el-col>
                <el-col :span="1.5">
                    <el-button type="danger" icon="Delete" :disabled="multiple" @click="handleDelete">删除</el-button>
                </el-col>
                <el-col :span="1.5">
                    <el-button type="warning" icon="Download" @click="handleExport">导出</el-button>
                </el-col>
                <el-col :span="1.5">
                    <el-button type="" icon="chatSquare" @click="handleNote">日志</el-button>
                </el-col>
            </el-row>
        </ControlsCommon>

        <el-table v-loading="loading" :data="noticeList" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" align="center" />
            <!-- <el-table-column label="序号" align="center" prop="merchantId" width="100" /> -->
            <el-table-column label="序号" align="center" type="index" width="100">
                <template #default="{ $index }">
                    {{ (queryParams.currentPage - 1) * queryParams.pageSize + $index + 1 }}
                </template>
            </el-table-column>
            <el-table-column label="监管单位" align="center" prop="name" />

            <el-table-column label="门面照片" width="100" align="center" prop="doorFace">
                <template #default="scope">
                    <el-image style="width: 50px; height: 50px;" :src="scope.row.doorFace"
                        :preview-src-list="[scope.row.doorFace]" preview-teleported>
                    </el-image>
                </template>
            </el-table-column>
            <el-table-column label="单位类型" align="center" prop="companyType">
                <template #default="scope">
                    <dict-tag :options="company_type" :value="scope.row.companyType" />
                </template>
            </el-table-column>
            <el-table-column label="监管机构" align="center" prop="governmentType" />
            <el-table-column label="监管行业" align="center" prop="industryName" />

            <el-table-column label="监管系统" align="center" prop="systemName" />

            <el-table-column label="监管区域" align="center" prop="areaName" show-overflow-tooltip />
            <el-table-column label="连锁机构" align="center" prop="linkMerchantName" />
            <el-table-column label="所属区域" align="center" prop="addressArea" show-overflow-tooltip />
            <el-table-column label="单位地址" align="center" prop="addressDetail" show-overflow-tooltip />
            <el-table-column label="邮政编码" align="center" prop="postalCode" />
            <el-table-column label="法人姓名" align="center" prop="legalPersonName" />
            <el-table-column label="法人电话" align="center" prop="legalPersonPhone" show-overflow-tooltip />
            <el-table-column label="单位电话" align="center" prop="phone" />
            <el-table-column label="邮箱" align="center" prop="email" />
            <el-table-column label="创建时间" align="center" prop="createTime" show-overflow-tooltip />
            <el-table-column label="状态" align="center" prop="isClose">
                <template #default="scope">
                    <span v-if="!scope.row.isClose">正常</span>
                    <span v-if="scope.row.isClose">停业</span>
                </template>
            </el-table-column>
            <el-table-column label="操作人员" align="center" prop="updateUserName" />
            <el-table-column fixed="right" label="操作" align="center" class-name="small-padding fixed-width">
                <template #default="scope">
                    <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)">修改</el-button>
                    <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <pagination v-show="total > 0" :total="total" v-model:page="queryParams.currentPage"
            v-model:limit="queryParams.pageSize" @pagination="getList" />

        <!-- 添加或修改单位对话框 -->
        <el-dialog :title="title" v-model="open" width="780px" append-to-body>
            <el-form ref="noticeRef" :model="form" :rules="rules" label-width="120px">
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="单位名称" prop="name">
                            <el-input v-model="form.name" placeholder="请输入单位名称" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12" v-if="true">
                        <el-form-item label="是否停业" prop="isClose">
                            <el-radio-group v-model="form.isClose">
                                <el-radio v-for="dict in [
                                    {
                                        elTagClass: null,
                                        elTagType: 'default',
                                        label: '启用',
                                        value: true
                                    },
                                    {
                                        elTagClass: null,
                                        elTagType: 'default',
                                        label: '禁用',
                                        value: false
                                    },
                                ]" :key="dict.value" :value="dict.value">{{
                                    dict.label
                                }}</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="单位类型" prop="companyType">
                            <el-select v-model="form.companyType" placeholder="请选择管理行业" filterable clearable>
                                <el-option v-for="item in company_type" :key="item.value" :label="item.label"
                                    :value="Number(item.value)" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="连锁机构" prop="merchantLinkName" v-if="form.companyType == '3'">
                            <!-- filterable搜索  allow-create 创建新的选项  -->
                            <el-select v-model="form.merchantLinkName" @change="sChange" default-first-option
                                allow-create placeholder="请选择连锁机构" filterable clearable>
                                <el-option v-for="item in listMerchantLink" :key="item.merchantLinkId"
                                    :label="item.name" :value="item.merchantLinkId" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="管理行业" prop="industryId">
                            <el-select v-model="form.industryId" placeholder="请选择管理行业" clearable>
                                <el-option v-for="item in listIndustryArr" :key="item.industryId" :label="item.name"
                                    :value="item.industryId" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="管理区域" prop="areaId">
                            <!-- ddd -->
                            <el-cascader class="flex-1" v-model="form.areaId" :options="options" :props="props2"
                                @change="TreeChange2" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="所在地区" prop="addressArea">
                            <!-- ccc -->
                            <el-cascader class="flex-1" v-model="form.addressArea" :options="options" :props="props1"
                                @change="TreeChange1" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="详细地址" prop="addressDetail">
                            <el-input v-model="form.addressDetail" placeholder="请输入详细地址" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="法人姓名" prop="legalPersonName">
                            <el-input v-model="form.legalPersonName" placeholder="请输入法人姓名" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="法人联系电话" prop="legalPersonPhone">
                            <el-input v-model="form.legalPersonPhone" placeholder="请输入法人联系电话" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="法人身份证号" prop="legalPersonIdcardNum">
                            <el-input v-model="form.legalPersonIdcardNum" placeholder="请输入法人身份证号" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="监管机构" prop="governmentType">
                            <el-input v-model="form.governmentType" placeholder="请输入监管机构" />
                        </el-form-item>
                    </el-col>
                </el-row>


                <el-row>
                    <el-col :span="12">
                        <el-form-item label="邮政编码" prop="postalCode">
                            <el-input v-model="form.postalCode" placeholder="请输入邮政编码" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="邮箱" prop="email">
                            <el-input v-model="form.email" placeholder="请输入邮箱" />
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="12">
                        <el-form-item label="门面照" prop="doorFace">
                            <ImageUpload v-model="form.doorFace" />
                        </el-form-item>
                    </el-col>
                </el-row>

            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button type="primary" @click="submitForm">确 定</el-button>
                    <el-button @click="cancel">取 消</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script setup name="Notice">

import {
    authApiAreaList,
    authApiIndustryList
} from "@/api/login.js";

const industryList = ref([])
const areaList = ref([])

function authApiAreaListApi() {
    authApiAreaList().then(
        (res) => {
            areaList.value = [...res];
        }
    );
}
function authApiIndustryListApi() {
    authApiIndustryList().then(
        (res) => {
            industryList.value = [...res];
        }
    );
}

onMounted(() => {
    authApiAreaListApi()
    authApiIndustryListApi()
})


// 获取行业列表
import {
    listIndustry
} from "@/api/backIndustry/backIndustry.js";
let listIndustryArr = []
listIndustry().then((res) => {
    listIndustryArr = res.records
})



// 获取连锁机构
import {
    merchantLinkApiList
} from "@/api/backMerchantLink/backMerchantLink.js";
let listMerchantLink = []
merchantLinkApiList().then((res) => {
    listMerchantLink = res.records
    console.log(listMerchantLink, "listMerchantLink");

})


const sChange = (e) => {
    if (listMerchantLink.find(i => i.merchantLinkId == e)) {
        form.value.merchantLinkId = e
        let merchantLinkName = listMerchantLink.find(i => i.merchantLinkId == e)?.name
        form.value.merchantLinkName = merchantLinkName
    } else {
        form.value.merchantLinkName = e
    }
}


import {
    getAreaTree
} from "@/api/common";
let options = []
let ccc = ''
let ddd = ''
getAreaTree().then((res) => {
    options = res
})

function findAreaNameById(data, targetId) {
    for (let i = 0; i < data.length; i++) {
        if (data[i].areaId === targetId) {
            return data[i].name;
        }
        if (data[i].children && data[i].children.length > 0) {
            const result = findAreaNameById(data[i].children, targetId);
            if (result) {
                return result;
            }
        }
    }
    return null;  // 如果没有找到
}

const props1 = { multiple: false, value: "areaId", label: "name", emitPath: true }
const props2 = { multiple: false, value: "areaId", label: "name", emitPath: true, checkStrictly: true }
function TreeChange1(e) {
    data.form.addressArea = `${e[e.length - 1]}`
}
function TreeChange2(e) {
    let a = findAreaNameById(options, e[0])
    let b = findAreaNameById(options, e[1])
    let c = findAreaNameById(options, e[2])
    // ID
    data.form.areaId = `${e[e.length - 1]}`
}



const router = useRouter()
const route = useRoute()
const handleNote = () => {
    let menuId = route.meta.menuId
    router.push(`/system/log/operlog?data=${menuId}`)
}

/** 导出按钮操作 */
function handleExport() {
    proxy.download(
        "/backAdmin/companyApi/company/export",
        {
            ...queryParams.value,
        },
        `user_${new Date().getTime()}.xlsx`
    );
}



import {
    listCompany,
    getCompany,
    delCompany,
    addCompany,
    updateCompany,
} from "@/api/backCompany/backCompany";

const { proxy } = getCurrentInstance();
const { company_type } = proxy.useDict(
    "company_type"
);

const noticeList = ref([]);
const open = ref(false);
const loading = ref(true);
const showSearch = ref(true);
const ids = ref([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);
const title = ref("");

const data = reactive({
    form: {},
    queryParams: {
        currentPage: 1,
        pageSize: 10,
        name: undefined,
        phone: undefined,
        governmentType: undefined,
        /*  */
        industryId: undefined,
        areaId: undefined,
    },
    rules: {
    },
});

const { queryParams, form, rules } = toRefs(data);

/** 查询单位列表 */
function getList() {
    loading.value = true;
    listCompany(queryParams.value).then((response) => {
        noticeList.value = response.records;
        total.value = response.total;
        loading.value = false;
    });
}

/** 取消按钮 */
function cancel() {
    open.value = false;
    reset();
}

/** 表单重置 */
function reset() {
    // ccc = ' ';
    form.value = {
        "email": "",
        "postalCode": "",
        "addressArea": "",
        "addressDetail": "",
        "doorFace": "",
        "industryId": "",
        "legalPersonIdcardNum": "",
        "legalPersonName": "",
        "legalPersonPhone": "",
        /*  */
        "merchantLinkId": "",
        "merchantLinkName": "",
        /*  */
        "name": "",
        /*  */
        "governmentType": ''
    };
    proxy.resetForm("noticeRef");
}

/** 搜索按钮操作 */
function handleQuery() {
    queryParams.value.currentPage = 1;
    getList();
}

/** 重置按钮操作 */
function resetQuery() {
    proxy.resetForm("queryRef");
    handleQuery();
}

/** 多选框选中数据 */
function handleSelectionChange(selection) {
    ids.value = selection.map((item) => item.merchantId);
    single.value = selection.length != 1;
    multiple.value = !selection.length;
}

/** 新增按钮操作 */
function handleAdd() {
    reset();
    open.value = true;
    title.value = "添加单位";
}

/**修改按钮操作 */
function handleUpdate(row) {
    // 回填
    form.merchantLinkId = row.merchantLinkId
    reset();
    const merchantId = row.merchantId || ids.value;
    getCompany(merchantId).then((response) => {
        form.value = response;
        open.value = true;
        title.value = "修改单位";
    });
}

/** 提交按钮 */
function submitForm() {
    proxy.$refs["noticeRef"].validate((valid) => {
        if (valid) {
            if (form.value.merchantId != undefined) {
                updateCompany(form.value).then((response) => {
                    proxy.$modal.msgSuccess("修改成功");
                    open.value = false;
                    getList();
                });
            } else {
                addCompany(form.value).then((response) => {
                    proxy.$modal.msgSuccess("新增成功");
                    open.value = false;
                    getList();
                });
            }
        }
    });
}

/** 删除按钮操作 */
function handleDelete(row) {
    const merchantIds = row.merchantId || ids.value;
    proxy.$modal
        .confirm('是否确认删除单位编号为"' + merchantIds + '"的数据项？')
        .then(function () {
            return delCompany(merchantIds);
        })
        .then(() => {
            getList();
            proxy.$modal.msgSuccess("删除成功");
        })
        .catch(() => { });
}

getList();
</script>